<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/component/pear/css/pear.css"/>
    <link rel="stylesheet" href="/layer-css.css"/>
    <style>
        .searchCriteria .pear-btn {
            height: 38px;
            line-height: 38px;
        }

        .centered {
            display: flex;
            flex-direction: row;
            align-items: center;
        }

        .lineChartBody .layui-tab-brief > .layui-tab-title .layui-this {
            color: #2176FF !important;
        }

        .lineChartBody .layui-tab-brief > .layui-tab-title .layui-this:after {
            border-bottom: 3px solid #2176FF !important;
        }

        .lineChartBody .layui-tab .layui-tab-title li {
            max-width: 36px;
            padding: 0px;
            min-width: 36px;
        }

        .layui-tab .layui-tab-title {
            border-bottom-style: none;
        }

        .lineChartBody .layui-tab .layui-tab-title li:not(:first-child) {
            margin-left: 40px;
        }
    </style>
</head>
<body class="pear-container">
<div class="layui-row layui-col-space15">
    <div class="layui-col-xs12 layui-col-md12">
        <div class="layui-card" style="border-radius: 6px 6px 6px 6px;">
            <div class="layui-card-body searchCriteria">
                <form class="layui-form" action="" onsubmit="return false">
                    <div class="layui-form-item">
<!--                        <div class="layui-form-item layui-inline">-->
<!--                            <label class="layui-form-label">选择库房</label>-->
<!--                            <div class="layui-input-inline">-->
<!--                                <input type="number" id="archiveArea" name="archiveArea" lay-verify="required"-->
<!--                                       lay-reqtext="请选择库房位置"-->
<!--                                       style="display:none;width: 0px" autocomplete="off" class="layui-input">-->
<!--                                <ul id="areaTree" class="dtree" data-id="0"></ul>-->
<!--                            </div>-->
<!--                        </div>-->
                        <div class="layui-form-item layui-inline">
                            <label class="layui-form-label">选择载体</label>
                            <div class="layui-input-inline">
                                <select name="hostId" lay-filter="carrierSelect" id="carrierSelect"
                                        lay-verify="required"
                                        lay-reqtext="请选择载体设备" lay-search>
                                    <option value="">请选择载体设备</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-form-item layui-inline">
                            <button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="temHumQuery">
                                <i class="layui-icon layui-icon-search"></i>
                                查询
                            </button>
                            <button type="reset" class="pear-btn pear-btn-md">
                                <i class="layui-icon layui-icon-refresh"></i>
                                重置
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<div class="layui-row layui-col-space15">
    <div class="layui-col-xs12 layui-col-md12">
        <div class="layui-card lineChartHeight" style="border-radius: 6px 6px 6px 6px;min-height: calc(100vh - 130px);">
            <div class="layui-card-body lineChartBody">
                <div class="centered" style="justify-content: space-between;margin-left: 12px;">
                    <div style="font-family: Source Han Sans SC, Source Han Sans SC;font-weight: bold;font-size: 20px;color: #000000;line-height: 20px;text-align: left;font-style: normal;text-transform: none;">
                        温湿度
                    </div>
                    <div class="centered">
                        <div class="centered">
                            湿度:
                            <div style="margin-left:14px;width: 20px;height: 20px;background: #4385F2;border-radius: 0px 0px 0px 0px;"></div>
                        </div>
                        <div class="centered" style="margin-left: 36px;">
                            温度:
                            <div style="margin-left:14px;width: 20px;height: 20px;background: #FCC952;border-radius: 0px 0px 0px 0px;"></div>
                        </div>
                        <div style="margin-left: 40px;">
                            <form class="layui-form" action="" style="margin-top: 0px;">
                                <div class="layui-form-item layui-inline" style="margin-bottom: 0px;">
                                    <div class="layui-inline" id="selectMonth"
                                         style="margin-bottom: 0px;margin-right: 0px;">
                                        <div class="layui-input-inline" style="width: 150px">
                                            <input type="text" autocomplete="off" style="width: 150px;height: 44px;"
                                                   name="startDate" id="startDate" class="layui-input"
                                                   placeholder="开始日期">
                                        </div>
                                        <div class="layui-input-inline" style="width: 150px">
                                            <input type="text" autocomplete="off" name="endDate" id="endDate"
                                                   class="layui-input" style="height: 44px;"
                                                   placeholder="结束日期">
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                <div class="layui-row"
                     style="display: flex;flex-direction: column;margin-top: 5px;margin-left: 12px;margin-right: 10px;">
                    <img src="/img/HandMovement/网格.png" alt="" style="max-width: 100%;">
                </div>
                <div class="">
                    <div id="lineChart" style="display: flex;min-height:500px"></div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="/component/layui/layui.js"></script>
<script src="/component/pear/pear.js"></script>
<script th:inline="javascript">
    var startDate = [[${startDate}]];
    var endDate = [[${endDate}]];

    layui.use(['jquery', 'layer', 'echarts', 'laydate', 'dtree', 'form'], function () {
        var layer = layui.layer;
        var $ = layui.jquery;
        let echarts = layui.echarts;
        let laydate = layui.laydate;
        let dtree = layui.dtree;
        let form = layui.form;
        let areaId = "";
        let hostId = "";

        // dtree插件下拉框点击空白处隐藏
        $(document).bind("click", function (e) {
            var e = e || window.event;    //事件对象，兼容IE
            var target = e.target || e.srcElement;  //源对象，兼容火狐和IE
            if ($(target).prop("class").indexOf("layui-card") == -1) {
                $(".dtree-select-show").removeClass("dtree-select-show");
            }
        })

        // dtree.on("node('areaTree')", function (obj) {
        //     var param = dtree.getNowParam("areaTree");
        //     $("#archiveArea").val(param.nodeId);
        //     areaId = param.nodeId;
            $.ajax({
                // url: "/host/get/list?areaId=" + areaId,
                url: "/host/list?page=1&limit=100",
                type: "get",
                dataType: "json",
                success: function (result) {
                    let carrierSelect = result.data;
                    let carrierSelectHtml = "<select name='hostId' lay-verify='required' lay-reqtext='请选择载体设备' lay-search>";
                    carrierSelectHtml += "<option value=''>请选择载体设备</option>";
                    for (let i = 0; i < carrierSelect.length; i++) {
                        let item = carrierSelect[i];
                        carrierSelectHtml += "<option value='" + item.id + "'>载体名称:" + item.cabinet_name + " 区号:" + item.cabinet_number + "</option>";
                    }
                    carrierSelectHtml += "</select>";
                    $("#carrierSelect").html(carrierSelectHtml);
                    form.render("select");
                }
            });
        // });

        // 初始化区域树
        // dtree.render({
        //     elem: "#areaTree",
        //     initLevel: "1",//默认展开层级为1
        //     width: "100%",
        //     method: 'get',
        //     dataStyle: "layuiStyle",  //使用layui风格的数据格式
        //     // response:{message:"msg",statusCode:200},  //修改response中返回数据的定义
        //     url: "/archives/area/buildAreaTree/table",
        //     dataFormat: "list",  //配置data的风格为list
        //     select: true, //指定下拉树模式
        //     selectTips: "请选择库房位置",
        //     selectCardHeight: "230"
        // });
        // 选择载体
        form.on('select(carrierSelect)', function (data) {
            var value = data.value;
            if (value === "") {
                return false;
            }
            hostId = value;
            console.log(hostId)
        });

        form.on('submit(temHumQuery)', function (data) {
            getTemHumLine(null, null, hostId);
            return false;
        });

        //日期范围
        laydate.render({
            elem: '#selectMonth',
            max: endDate,
            min: startDate,
            range: ['#startDate', '#endDate'],
            theme: '#000',
            done: function (value, date, endDate) {
                let selectStartDate = date.year + "-" + date.month + "-" + date.date
                let selectEndDate = endDate.year + "-" + endDate.month + "-" + endDate.date
                getTemHumLine(selectStartDate, selectEndDate,hostId)
            },
        });

        // 借阅记录柱状图
        function getTemHumLine(selectStartDate, selectEndDate,hostId) {
            $.get('/host/tem/hum/line', {
                "selectStartDate": selectStartDate,
                "selectEndDate": selectEndDate,
                "hostId": hostId
            }).done(function (data) {
                var myChart = echarts.init(document.getElementById('lineChart'), null, {
                    // height: 500
                });
                const colorList = ["#FCC952", '#4385F2']
                option = {
                    backgroundColor: '#fff',
                    title: {
                        text: '温湿度变化趋势图',
                        fontSize: 12,
                        fontWeight: 400,
                        left: 'center',
                        top: '5%'
                    },
                    legend: {
                        icon: 'circle',
                        top: '5%',
                        right: '5%',
                        itemWidth: 8,
                        itemGap: 20,
                        color: '#556677'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            label: {
                                show: true,
                                backgroundColor: '#fff',
                                color: '#556677',
                                borderColor: 'rgba(0,0,0,0)',
                                shadowColor: 'rgba(0,0,0,0)',
                                shadowOffsetY: 0
                            },
                            lineStyle: {
                                width: 0
                            }
                        },
                        backgroundColor: '#fff',
                        color: '#5c6c7c',
                        padding: [10, 10],
                        extraCssText: 'box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)'
                    },
                    grid: {
                        top: '15%'
                    },
                    xAxis: [{
                        type: 'category',
                        data: data.xNameList,
                        axisLine: {
                            lineStyle: {
                                color: '#DCE2E8'
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            interval: 0,
                            color: '#556677',
                            // 默认x轴字体大小
                            fontSize: 12,
                            // margin:文字到x轴的距离
                            margin: 15
                        },
                        axisPointer: {
                            label: {
                                // padding: [11, 5, 7],
                                padding: [0, 0, 10, 0],

                                // 这里的margin和axisLabel的margin要一致!
                                margin: 15,
                                // 移入时的字体大小
                                fontSize: 12,
                                backgroundColor: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 0,
                                        color: '#fff' // 0% 处的颜色
                                    }, {
                                        // offset: 0.9,
                                        offset: 0.86,

                                        color: '#fff' // 0% 处的颜色
                                    }, {
                                        offset: 0.86,
                                        color: '#33c0cd' // 0% 处的颜色
                                    }, {
                                        offset: 1,
                                        color: '#33c0cd' // 100% 处的颜色
                                    }],
                                    global: false // 缺省为 false
                                }
                            }
                        },
                        boundaryGap: false
                    }],
                    yAxis: [{
                        type: 'value',
                        axisTick: {
                            show: false
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#DCE2E8'
                            }
                        },
                        axisLabel: {
                            color: '#556677',
                        },
                        splitLine: {
                            show: false
                        }
                    }
                    ],
                    series: [{
                        name: '温度',
                        type: 'line',
                        data: data.temList,
                        symbolSize: 1,
                        symbol: 'circle',
                        smooth: true,
                        yAxisIndex: 0,
                        showSymbol: true,
                        lineStyle: {
                            width: 5,
                            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                                offset: 0,
                                color: '#FCC952'
                            }
                            ]),
                            shadowColor: 'rgba(255, 204, 145, 0.5)',
                            shadowBlur: 10,
                            shadowOffsetY: 20
                        },
                        itemStyle: {
                            color: colorList[0],
                            borderColor: colorList[0]
                        }
                    }, {
                        name: '湿度',
                        type: 'line',
                        data: data.humList,
                        symbolSize: 1,
                        symbol: 'circle',
                        smooth: true,
                        yAxisIndex: 0,
                        showSymbol: true,
                        lineStyle: {
                            width: 5,
                            color: new echarts.graphic.LinearGradient(1, 1, 0, 0, [{
                                offset: 0,
                                color: '#4385F2'
                            }
                            ]),
                            shadowColor: 'rgba(67, 133, 242, 0.5)',
                            shadowBlur: 10,
                            shadowOffsetY: 20
                        },
                        itemStyle: {
                            color: colorList[1],
                            borderColor: colorList[1]
                        }
                    }],
                    dataZoom: [{
                        type: 'slider', // 这个 dataZoom 组件是滑动条
                        start: 10,      // 左边在 10% 的位置
                        end: 50         // 右边在 50% 的位置
                    }, {
                        type: 'inside', // 这个 dataZoom 组件是内置类型
                        start: 10,
                        end: 50
                    }]
                };

                myChart.setOption(option);

                var height = $('.lineChartHeight').outerHeight();
                // 输出高度
                myChart.resize({height: height - 80});
            });
        }

        // getTemHumLine(null, null);
    });

</script>
</body>
</html>